<template>
	<div class="login">
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
			<h1 class="title">后台登录</h1>
			<el-form-item prop="name">
				<el-input v-model="ruleForm.uname" placeholder="请输入账户"></el-input>
			</el-form-item>
			<el-form-item prop="pass">
				<el-input type="password" v-model="ruleForm.upass" autocomplete="off" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item style="width:100%;">
				<el-button style="width:100%;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "login",
		components: {},
		computed: {},
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					name:'',
					uname: 'admin',
					upass: '',
				},
				rules: {
					name: [
						{ message: '请输入账户', trigger: 'blur' },
						{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
					],
					pass: [
						{ validator: validatePass, trigger: 'blur' }
					],
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/api/login/index',{
							username: this.ruleForm.uname,
							password: this.ruleForm.upass
						}).then(res =>{
							let { code, message } = res.data
							let { name } = res.data.data
							if(code != 200){
								this.$message.error(message);
							}else {
								this.ruleForm.name = name;
								sessionStorage.setItem('user', JSON.stringify(this.ruleForm));
								this.$message.success(message)
								this.$router.push({ path: '/' });
							}
						})
					} else {
						return false;
					}
				});
			},
		},
		mounted() {
		}
	}
</script>

<style scoped lang="scss">
.login{
	.demo-ruleForm{
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		.title {
			margin: 0px auto 40px auto;
			text-align: center;
			color: #505458;
			font-weight: bold;
		}
	}
}
</style>